<template>
  <div class="item-box" @click="choice" :class="{ active: Active }" ref="itemRef">
    <img class="item-box-img" :src="info" alt="" />
    <img v-show="Active" class="active-img" :src="publicUrls + 'free/freeActive.png'" alt="" />
  </div>
</template>   
  
<script setup lang="ts">
import { publicUrls } from '@/utils/minxin';
import { ref } from 'vue';
const props = defineProps({
  info: {
    type: String,
  },
  Active: {
    type: Boolean,
  },
});
const itemRef = ref();
const emit = defineEmits(['previewEmit', 'choiceEmit', 'previewLeave']);
const choice = () => {
  emit('choiceEmit');
};
const preview = () => {
  const element = itemRef.value;
  if (element) {
    let emitHeight: number = 0;
    const rect = element.getBoundingClientRect();
    const distanceFromTop = rect.top; // 这个值就是元素距离视口顶部的距离
    const realHeight = document.documentElement.clientHeight || document.body.clientHeight; // 当前视口的高度
    const heights = (realHeight / 900) * 320; // 获取当前图片宽高
    if (distanceFromTop + heights > realHeight) {
      emitHeight = realHeight - heights;
    } else {
      emitHeight = distanceFromTop; 
    }

    // emit('previewEmit', props.info, emitHeight);
  } else {
    // emit('previewEmit', props.info);
  }
  // itemRef
  // 320
};
const previewLeave = () => {
  emit('previewLeave', '');
};
</script>  

<style scoped lang="less">
.item-box {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 160px;
  border-radius: 4px;
  margin-top: 12px;
  background: #f0f0f0;
  border: 1px solid #e6e6e6;
  overflow: hidden;
}
.active-img {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 28px;
  height: 28px;
  z-index: 20;
}
.preview {
  opacity: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  align-items: center;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  z-index: 30;
  .doorIcon {
    font-size: 16px;
    color: #fff;
  }
}
.item-box:hover {
  border: 1px solid #e62b17;
  .preview {
    opacity: 1;
  }
}
.active {
  border: 1px solid #e62b17;
}
.preview:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.4);
}
.item-box-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f0f0f0;
}
</style>